<template>
  <div>
    <storeDiyForm :title="diyItem.name" :hide="['other']">
      <template #content>
        <storeDiyFormItem label="线条格式">
          <storeDiyFormSelectBtn
            v-model="diyItem.layout.value"
            :data="layoutData"
          ></storeDiyFormSelectBtn>
        </storeDiyFormItem>
      </template>
      <template #style>
        <storeDiyFormItem label="线条颜色">
          <storeDiyFormColorBtn v-model="diyItem.style.color" />
        </storeDiyFormItem>

        <storeDiyFormItem label="线条高度">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.lh }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.lh"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem label="背景状态">
          <storeDiyFormSelectBtn
            v-model="diyItem.style.bg_status"
            :data="bgStatusData"
          ></storeDiyFormSelectBtn>
        </storeDiyFormItem>
        <storeDiyFormItem label="背景颜色" v-if="diyItem.style.bg_status">
          <storeDiyFormColorBtn v-model="diyItem.style.bg" />
        </storeDiyFormItem>

        <storeDiyFormItem
          label="背景上圆角"
          v-if="diyItem.style.bg_status == 1"
        >
          <div class="editor-input-block">
            <div class="editor-input-desc">
              {{ diyItem.style.t_radius }}px(像素)
            </div>
            <el-slider
              v-model="diyItem.style.t_radius"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem
          label="背景下圆角"
          v-if="diyItem.style.bg_status == 1"
        >
          <div class="editor-input-block">
            <div class="editor-input-desc">
              {{ diyItem.style.b_radius }}px(像素)
            </div>
            <el-slider
              v-model="diyItem.style.b_radius"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem
          label="背景投影样式"
          v-if="diyItem.style.bg_status == 1"
        >
          <storeDiyFormSelectBtn
            v-model="diyItem.style.shade"
            :data="shadeData"
          ></storeDiyFormSelectBtn>
        </storeDiyFormItem>

        <el-divider content-position="left">
          <div class="fw">边距</div>
        </el-divider>

        <storeDiyFormItem label="外左边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.ml }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.ml"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>

        <storeDiyFormItem label="外右边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.mr }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.mr"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem label="外上边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.mt }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.mt"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem label="外下边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.mb }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.mb"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>

        <storeDiyFormItem label="内左边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.pl }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.pl"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem label="内右边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.pr }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.pr"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>

        <storeDiyFormItem label="内上边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.pt }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.pt"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem label="内下边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.pb }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.pb"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
      </template>
    </storeDiyForm>
  </div>
</template>
<script lang="ts">
export default {
  name: "storeDiyEditorGuide",
};
</script>
<script  lang="ts" setup >
import { ref, getCurrentInstance } from "vue";
import storeDiyForm from "../form/index.vue";
import storeDiyFormItem from "../form/item.vue";
import storeDiyFormItems from "../form/items.vue";
import storeDiyFormSelectBtn from "../form/select-btn.vue";
import storeDiyFormColorBtn from "../form/color-btn.vue";
import { diySelectDataType, diyGuideDataType } from "@/types";
const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const props = withDefaults(
  defineProps<{
    diyItem: diyGuideDataType;
  }>(),
  {
    diyItem: () => {
      return {
        layout: {
          value: "solid",
        },
        style: {
          color: "#000000",
          lh: 1,
          bg_status: 0,
          bg: "#FFFFFF",
          shade: 0,
          ml: 0,
          mr: 0,
          mt: 0,
          mb: 0,
          pl: 0,
          pr: 0,
          pt: 0,
          pb: 0,
          t_radius: 0,
          b_radius: 0,
        },
        img: "",
        link: {},
      };
    },
  }
);

const layoutData = ref<Array<diySelectDataType>>([
  {
    title: "实线",
    value: "solid",
  },
  {
    title: "虚线",
    value: "dashed",
  },
  {
    title: "点状",
    value: "dotted",
  },
]);

const bgStatusData = ref<Array<diySelectDataType>>([
  {
    title: "显示",
    value: 1,
  },
  {
    title: "不显示",
    value: 0,
  },
]);

const shadeData = ref<Array<diySelectDataType>>([
  {
    title: "常规",
    value: 0,
  },
  {
    title: "投影",
    value: 1,
  },
]);
</script>